<template>
  <!--val不需要添加.value-->
  <input
    v-model="val"
    class="input"
    placeholder="请输入备忘录"
    type="text"
    @keydown.enter="enterHandler"
  />
</template>

<script lang="ts">
import { ref } from "vue";

export default {
  name: "TodoHeader",
  //$emit不再通过this来访问,而是通过另外的方式
  //setup会接受两个参数
  //1是props
  //2是对象,对象包含了emit这个方法
  setup(props, context) {
    //定义一个响应式变量,通过v-model绑定到input中
    //reactive()只接收对象作为参数,vue提供了另外一个方法,可以吧一个非对象的数据变成响应式的: ref方法
    //ref会返回一个响应式的对象,值存储在这个对象的value属性中,所以我们㤇通过.value属性获取值
    //ref在末班中可以省略.value
    const val = ref<string>("");
    // console.log(val);
    const enterHandler = () => {
      //在逻辑中, .value不要忘记了
      console.log("enter", val.value);
      console.log(props, context);
      context.emit("add", val.value);
      val.value = "";
    };
    return {
      val,
      enterHandler,
    };
  },
};
</script>

<style scoped>
.input {
  height: 30px;
  line-height: 30px;
  width: 100%;
  padding: 5px;
  background: #fff;
  border: 1px solid #000;
  color: black;
  border-radius: 10px;
}
</style>
